<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <title>欢迎来到 Steam</title>
  <style>
    body{
      background-color: #1b2838;
      width: 100%;
     min-width: 1200px;
    }
    .el-header{

      line-height: 104px;
    }
    #elheader{
      background: #171a21;
      background-position: center top;
      width: 1200px;

      font-family: "Motiva Sans", Sans-serif;
      font-weight: normal;
      font-size: 14px;
      padding-left: 16px;
      padding-right: 16px;
      padding: 0;
      margin: 0;

    }
    #headertitle{
      background: #171a21;
      position: relative;
      position: relative;
      width: 1200px;
      height: 60px;
    }

    #headmenu{
      font-family: "Motiva Sans", Sans-serif;
      font-weight: normal;
      font-size: 14px;
      position:relative;
      top:0px;
      right: 300px;
      bottom: 13px;
      left: 20px;
      float: right;
      width: 1000px;
      text-decoration:underline
    }
    #headerlogo{
      margin-bottom: 7px;
    }
    #headerright{
      position: absolute;
      right: 0px;
      top: 6px;
      height: 21px;
      line-height: 21px;
      color: #b8b6b4;
      font-size: 11px;
      z-index: 401;
    }
    #headerrightmenu{
      line-height: 24px;
      vertical-align: top;
      display: inline-block;
    }
    #headerrightmenubutton{
      display: inline-block;
      position: relative;
      height: 21px;
      line-height: 24px;
      margin-right: 3px;
      background-color: #5c7e10;
      display: inline-block;
      padding-left: 35px;
      padding-right: 9px;
      background-position: 10px 5px;
      background-image: url(https://store.akamai.steamstatic.com/public/shared/images/header/btn_header_installsteam_download.png?v=1);
      background-repeat: no-repeat;
      text-decoration: none;
      color: #e5e4dc;
      font-weight: normal;
      cursor: pointer;
    }
    #headerrmblogin{
      color: #b8b6b4;
      text-decoration: none;
    }

     .el-dropdown-link {
       cursor: pointer;
       color: #409EFF;
     }
    .el-icon-arrow-down {
      font-size: 12px;
    }


  </style>
</head>
<body>
<div id="app">

  <el-container>
    <el-header id="elheader">
      <div id="headertitle">

        <div style="margin-bottom: 10px;height: 40px; cursor: pointer;float: left" >
        <img id="headerlogo" src="imgsteam/logo_steam.png" width="180px" height="44px ">
        </div>

        <div id="headmenu">
        <el-menu style="width: 1200px;margin: 0 auto"
                 mode="horizontal" background-color="#171a21"
                 text-color="#b8b6b4" active-text-color="#fff">

          <el-submenu index="1">
          <template slot="title">商店</template>
            <el-menu-item index="1-1">主页</el-menu-item>
            <el-menu-item index="1-2">探索队列</el-menu-item>
            <el-menu-item index="1-3">愿望单</el-menu-item>
            <el-menu-item index="1-4">点数商店</el-menu-item>
            <el-menu-item index="1-5">新闻</el-menu-item>
            <el-menu-item index="1-6">统计数据</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">社区</template>
            <el-menu-item index="2-1">主页</el-menu-item>
            <el-menu-item index="2-2">讨论</el-menu-item>
            <el-menu-item index="2-3">创意工坊</el-menu-item>
            <el-menu-item index="2-4">市场</el-menu-item>
            <el-menu-item index="2-5">实况直播</el-menu-item>
            </el-submenu>
          <el-menu-item index="3">关于</el-menu-item>
          <el-menu-item index="4">客服</el-menu-item>

        </el-menu>

      </div>

        <div id="headerright">
          <div id="headerrightmenu">
            <div id="headerrightmenubutton">
             安装Steam
            </div>
            <a id="headerrmblogin" href="">登录    |</a>
            <el-dropdown>
  <span class="el-dropdown-link">
    语言<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>繁體中文（繁体中文）</el-dropdown-item>
                <el-dropdown-item>日本語（日语）</el-dropdown-item>
                <el-dropdown-item>한국어（韩语）</el-dropdown-item>
                <el-dropdown-item disabled>ไทย（泰语）</el-dropdown-item>
                <el-dropdown-item divided>Deutsch（德语）</el-dropdown-item>
                <el-dropdown-item divided> Français（法语） </el-dropdown-item>
                <el-dropdown-item divided>Italiano（意大利语）  </el-dropdown-item>
                <el-dropdown-item divided>Русский（俄语）  </el-dropdown-item>
                <el-dropdown-item divided>English（英语）  </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>


          </div>

        </div>
      </div>
    </el-header>


    <el-main>Main</el-main>
    <el-footer>Footer</el-footer>
  </el-container>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {

      }
    },
    methods:{

    }
  })
</script>
</html>